<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#divA {
				width: 200px;
				height: 200px;
				background-color: lightsalmon;
				padding: 10px;
			}

			#divB {

				width: 100px;
				height: 100px;
				background-color: lightblue;
				padding: 10px;
			}

			#divC {

				width: 50px;
				height: 50px;
				background-color: lightgoldenrodyellow;
				padding: 10px;
			}
		</style>
	</head>
	<body>
		<div id="divA">
			<div id="divB">
				<div id="divC">
					C
				</div>
				B
			</div>
			A
		</div>
		<script>
			//1. 冒泡（默认 从里到外)
			// divA.onclick = function(){
			// 	alert("A被点击了")
			// }
			// divB.onclick = function(){
			// 	alert("B被点击了")
			// }
			// divC.onclick = function(){
			// 	alert("C被点击了")
			// }
			
			

			//2. 捕获（默认 从外到里)
			divA.addEventListener("click",function(){
				alert("A被点击了")
			},true)
			divB.addEventListener("click",function(){
				alert("B被点击了")
			},true)
			divC.addEventListener("click",function(){
				alert("C被点击了")
			},true)
			
			//停止继续传递
			//event.stopPropagation();
			//取消默认处理 (取消某些html元素自己默认的事件处理)
			//event.preventDefault()
			
		</script>
	</body>
</html>
